import React from 'react';
import QRCode from 'qrcode.react';
import copy from 'copy-to-clipboard';
import { Button, message } from 'antd';
import { CopyOutlined } from '@ant-design/icons';

import './ShareModal.styl';

function ShareModal({ url, imageSettings }) {
  return (
    <div className="qrcode-modal">
      <div className="qrcode-wrap">
        <QRCode size={230} value={url} imageSettings={imageSettings} />
      </div>
      <div className="url-wrap">
        <p className="url">{url}</p>
        <div className="button-wrap">
          <Button
            type="primary"
            icon={<CopyOutlined />}
            onClick={() => {
              if (copy(url)) {
                message.success('复制成功');
              } else {
                message.error('复制失败，请稍后再试');
              }
            }}
          >
            点击复制链接
          </Button>
        </div>
      </div>
    </div>
  );
}

export default ShareModal;
